<template>
  <div class="search_box ">
    <el-form ref="searchForm" label-position="right" :model="searchForm" class="search_form botLeft  flex-wrap ">
      <!-- 动态加载组件 -->
      <el-form-item v-if="index<(showMoreS?searchField.length:showNum)" v-for="(item,index) of searchField" :key="index" :label="item.attribute.label" :label-width="item.attribute.labelWidth||'100px'" :class="[{'search_form_Two_width':item.templateName=='datetimerange'},{'demo':item.attribute.labelKey=='quarterTime'}]">
        <component :attribute="item.attribute" :is="item.templateName" />
      </el-form-item>
      <el-form-item v-if="searchField.length" style="width:auto;" label-width="100px" label="">
        <el-button @click="searchFrom()" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="clearSearchFrom()">清空</el-button>
        <el-button v-if="searchField.length>showNum" @click="showMoreS=!showMoreS" :icon="showMoreS?'el-icon-arrow-up':'el-icon-arrow-down'" type="text">{{showMoreS?'收起':'展开'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import datePicker from "@/components/formTemp/datePicker";
import datetimerange from "@/components/formTemp/datetimerange";
import inputString from "@/components/formTemp/inputString";
import inputNumber from "@/components/formTemp/inputNumber";
import selectBase from "@/components/formTemp/selectBase";
export default {
  name: "search",
  props: {
    searchField: {
      tyep: Array,
      default: () => []
    },
    showNum: {
      //展示的数目
      type: Number,
      default: 4
    }
  },
  components: {
    datePicker,
    datetimerange,
    inputString,
    inputNumber,
    selectBase
  },
  data() {
    return {
      showMoreS: false, //是否展示更多
      searchForm: {} //搜索表单
    };
  },
  methods: {
    // 搜索
    searchFrom() {
      // console.log(this.searchField);
      this.searchForm = {};
      this.searchField.map(item => {
        if (item.attribute.labelValue === undefined) {
          return;
        }
        const labelValueTypeof = typeof item.attribute.labelValue;
        if (labelValueTypeof == "object" && item.attribute.labelValue.length) {
          this.searchForm[item.attribute.labelKey] = item.attribute.labelValue;
        } else if (
          labelValueTypeof != "object" &&
          item.attribute.labelValue !== ""
        ) {
          this.searchForm[item.attribute.labelKey] = item.attribute.labelValue;
        }
      });
      this.$emit("searchCallBack", this.searchForm);
    },
    // 清空
    clearSearchFrom() {
      this.searchField.map(item => {
        if (typeof item.attribute.labelValue == "object") {
          item.attribute.labelValue = [];
        } else {
          item.attribute.labelValue = "";
        }
      });
      this.searchFrom();
    }
  }
};
</script>
<style scoped>
.demo {
  min-width: 340px !important;
}
</style>
<style scoped>
@import "./index.css";
</style>
